<template>
	<view class="nfc-box u-p-20">
		<mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="nfc-card u-p-20 u-m-b-60" v-for="item in dataList" :key="item.id" :class="{ 'disabled-bg': item.nfcStatus !== 1 }" @click="isSheetFunc(item)">
				<img src="/static/image/icons/nfc_icon.png" class="bg-icon" />
				<view class="nfc-name u-m-b-10">{{ item.nfcName || '未定义名称' }}</view>
				<view class="nfc-status  u-m-b-80">状态：{{ item.nfcStatus === 1 ? '启用' : '禁用（防止卡遗失被盗用）' }}</view>
				<view class="nfc-code">
					<view class="">IC：{{ item.nfcCode }}</view>
					<view class="code-tip">IC卡的金额和当前账户绑定</view>
				</view>
			</view>
		</mescroll-body>
		<u-action-sheet
			:actions="listSheet"
			:title="changeInfo.nfcName"
			:show="showSheet"
			:safeAreaInsetBottom="true"
			@close="isSheetFunc()"
			@select="changeSheet"
		></u-action-sheet>
		<!-- 删除Nfc确定弹窗 -->
		<u-modal
			:show="delShow"
			title="温馨提示"
			:showCancelButton="true"
			:content="'你确定要删除' + changeInfo.nfcName + '吗？'"
			@confirm="deleteNfc"
			@cancel="delShow = false"
		></u-modal>
		<bottomBtn title="添加IC卡" @change="jumpPage('/packMyself/nfc/editNfc')" />
	</view>
</template>

<script>
import bottomBtn from '@/components/bottomBtn.vue';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	components: { bottomBtn },
	data() {
		return {
			// 分页配置
			upOption: {
				textNoMore: '没有更多了',
				noMoreSize: 1,
				empty: {
					icon: require('@/static/image/empty/icon-baobiao.png'),
					tip: '暂无通知信息',
					fixed: true,
					top: '300rpx'
				},
				toTop: {
					safearea: true
				}
			},
			delShow: false,
			listSheet: [
				{
					name: '编辑',
					id: 1
				},
				{
					name: '解绑',
					id: 2
				}
			],
			showSheet: false, // 操作栏的状态
			dataList: [], // IC卡列表
			changeInfo: {} // 选择当前IC卡的信息
		};
	},
	onShow() {
		// this.getList();
	},
	methods: {
		// 获取优惠券列表
		async upCallback() {
			const res = await this.$api.nfc.list();
			const curPageData = res.data ? res.data : [];
			let curPageLen = curPageData.length;
			this.dataList = curPageData;
			//后台接口有返回列表的总页数 totalPage
			this.mescroll.endBySize(curPageLen, curPageLen);
		},
		// 获取用户的IC卡列表
		async getList() {
			const res = await this.$api.nfc.list();
			this.ICList = res.data;
		},
		// 跳转页面
		jumpPage(url) {
			uni.navigateTo({
				url
			});
		},
		// 打开操作页
		isSheetFunc(info) {
			if (info) this.changeInfo = info;
			this.showSheet = !this.showSheet;
		},
		// 选择操作栏 1 编辑 2 删除
		changeSheet(info) {
			if (info.id === 1) this.jumpPage('/packMyself/nfc/editNfc?id=' + this.changeInfo.id);
			if (info.id === 2) {
				this.delShow = true;
			}
		},
		// 删除IC卡
		async deleteNfc() {
			const res = await this.$api.nfc.unbind({ id: this.changeInfo.id });
			if (res.code === 200) {
				this.$u.toast('删除成功');
				this.delShow = false;
				this.getList();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.nfc-box {
	.nfc-card {
		position: relative;
		background: #5186ec;
		font-size: 28rpx;
		border-radius: 3px;
		color: #fff;
		box-shadow: 1px 6px 10px #5186eca6;
		.bg-icon {
			right: -4px;
			bottom: 0;
			width: 200rpx;
			height: 200rpx;
			position: absolute;
		}
		.nfc-name {
			font-size: 32rpx;
			font-weight: bold;
		}
		.nfc-code {
			display: flex;
			justify-content: space-between;
			.code-tip {
				font-size: 24rpx;
				color: #e0e0e0;
			}
		}
	}
	.disabled-bg {
		background: #ccc;
		box-shadow: none;
	}
}
</style>
